@charset "UTF-8";

/***********
 * Buttons *
 ***********/

 @mixin button($t) {
    //
    // Button drawing function
    //
    // $t:    button type,

    @if $t==normal {
        box-shadow: none;
        text-shadow: none;
        -gtk-icon-shadow: none;

        color: gtk("@theme_widget_foreground_normal");
        border-color: gtk("@theme_widget_border_normal");
        background-color: gtk("@theme_widget_background_normal");
    } @else if $t==hover {
        border-color: gtk("@theme_widget_border_normal");
        background-color: gtk("@theme_widget_background_hover");
    } @else if $t==active {
        border-color: gtk("@theme_widget_border_normal");
        background-color: gtk("@theme_widget_background_active");
    }  @else if $t==checked {
        border-color: gtk("@theme_widget_border_normal");
        background-color: gtk("@theme_widget_background_checked");
    } @else if $t==insensitive {
        color: gtk("@theme_widget_foreground_insensitive");
        border-color: gtk("@theme_widget_border_insensitive");
        background-color: gtk("@theme_widget_background_insensitive");

        > .label {
            color: inherit;
        }
    } @else if $t==backdrop {
        color: gtk("@theme_widget_foreground_backdrop");
        border-color: gtk("@theme_widget_border_backdrop");
        background-color: gtk("@theme_widget_background_backdrop");
    }@else if $t==backdrop-checked {
        color: gtk("@theme_widget_foreground_backdrop");
        border-color: gtk("@theme_widget_border_backdrop");
        background-color: gtk("@theme_widget_background_backdrop_checked");
    } @else if $t==backdrop-insensitive {
        color: gtk("@theme_widget_foreground_backdrop_insensitive");
        border-color: gtk("@theme_widget_border_backdrop_insensitive");
        background-color: gtk("@theme_widget_background_backdrop_insensitive");
        > .label {
            color: inherit;
        }
    } @else if $t==undecorated {
        border-color: transparent;
        background-color: transparent;
        background-image: none;
        box-shadow: none;
        color: gtk("@theme_widget_foreground_normal");

        text-shadow: none;
        -gtk-icon-shadow: none;
    }
}


// stuff for .needs-attention
$_dot_color: gtk("@theme_widget_foreground_active");
@keyframes needs_attention {
  from {
    background-image: -gtk-gradient(
      radial,
      center center,
      0,
      center center,
      0.01,
      to($_dot_color),
      to(transparent)
    );
  }
  to {
    background-image: -gtk-gradient(
      radial,
      center center,
      0,
      center center,
      0.5,
      to(gtk("@theme_selected_bg_color")),
      to(transparent)
    );
  }
}



%buttons {
    border: 1px solid;
    border-radius: $RadiusLittle;
    padding: 4px 8px;
    background-clip: border-box;

    @include button(normal);
    &.flat {
        @include button(undecorated);
    }

    &:hover {
        @include button(hover);
        -gtk-icon-effect: none; // Do we want this?
    }

    &:active,
    &:checked {
        @include button(active);
        transition-duration: 50ms;
    }

    &:backdrop {
        @include button(backdrop);
        -gtk-icon-effect: none;

        /* &:checked{
            @include button(backdrop-checked);
        } */

        &:disabled {
            @include button(backdrop-insensitive);
        }
    }

    &.flat:backdrop {
        -gtk-icon-effect: none;
        @include button(undecorated);
        color: gtk("@theme_widget_foreground_backdrop");
    }

    &.flat:disabled {
        @include button(undecorated);
        color: gtk("@theme_widget_foreground_insensitive");
    }
    
    &.flat:backdrop:disabled {
        @include button(undecorated);
        color: gtk("@theme_widget_foreground_backdrop_insensitive");
    }

    &:disabled {
        @include button(insensitive);
    }

    separator {
        background-color: transparent;
        background-image: none;
        color: transparent;
    }
}

%button,
button {
    @at-root %button_basic,
    & {
        @extend %buttons;
        &.osd {
            @extend %buttons;
        }
        //overlay / OSD style
        @at-root %osd_button,
        .osd & {
            @extend %buttons;
        }

        &.image-button {
            min-width: 16px;
            padding: 6px;
        }

        &.text-button {
            padding-left: 6px;
            padding-right: 6px;
        }

        &.text-button.image-button {
            padding-left: 6px;
            padding-right: 6px;
            label {
                padding-left: 6px;
                padding-right: 6px;
            }
        }
        // FIXME
        // &:drop(active) {
        //   color: $drop_target_color;
        //   border-color: $drop_target_color;
        //   box-shadow: inset 0 0 0 1px $drop_target_color;
        // }
    }

    @at-root %button_selected,    
    & {
        row:selected & {
            border-color: gtk("@theme_selected_bg_color");

            &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
                color: gtk("@theme_selected_fg_color");
                border-color: transparent;

                &:backdrop {
                    color: gtk("@theme_unfocused_selected_fg_color");
                }
            }
        }
    }

    // Suggested and Destructive Action buttons
    @each $b_type, $button_color in (suggested-action, gtk("@theme_selected_bg_color")),
                                    (destructive-action, gtk("@theme_widget_background_normal")) {
        &.#{$b_type},
        &.#{$b_type}.osd & {
            @include button(normal);
            background-color: $button_color;
            color: gtk("@theme_widget_foreground_normal");
            &.flat {
                @include button(undecorated);
            }
            &:hover {
                @include button(hover);
                background-color: gtkmix($button_color, gtk("@theme_widget_foreground_normal"), 0.1);
            }
            &:active,
            &:checked {
                @include button(active);
                background-color: gtkmix($button_color, gtk("@theme_widget_foreground_normal"), 0.2);
            }
            &:backdrop,
            &.flat:backdrop {
                @include button(backdrop);
                background-color: $button_color;
                &:disabled {
                    @include button(backdrop-insensitive);
                }
            }
            &.flat:backdrop,
            &.flat:disabled,
            &.flat:backdrop:disabled {
                @include button(undecorated);
            }
            &:disabled {
                @include button(insensitive);
            }
        }
    }

    .stack-switcher > & {
        // to position the needs attention dot, padding is added to the button
        // child, a label needs just lateral padding while an icon needs vertical
        // padding added too.
        > label {
            padding-left: 6px; // label padding
            padding-right: 6px; //
        }
        > image {
            padding-left: 6px; // image padding
            padding-right: 6px; //
            padding-top: 3px; //
            padding-bottom: 3px; //
        }
        &.text-button {
            padding: 6px; // needed or it will get overridden
        }
        &.image-button {
            // we want image buttons to have a 1:1 aspect ratio, so compensation
            // of the padding added to the GtkImage is needed
            padding: 3px 0px;
        }
        &.needs-attention > label,
        &.needs-attention > image {
            @extend %needs_attention;
        }
        &.needs-attention:active > label,
        &.needs-attention:active > image,
        &.needs-attention:focus > label,
        &.needs-attention:focus > image,
        &.needs-attention:checked > label,
        &.needs-attention:checked > image {
            animation: none;
            background-image: none;
        }
    }

    // hide separators
    &.font,
    &.file {
        separator {
            background-color: transparent; 
        }
    }

    &.font {
        > box > box > label {
            font-weight: bold; 
        }
    }

    //inline-toolbar buttons
    .inline-toolbar &,
    .inline-toolbar &:backdrop {
        border-radius: $RadiusLittle;
        border-width: 1px;
        @extend %linked;
    }

    .primary-toolbar & {
        -gtk-icon-shadow: none;
    }

    .linked > &,
    .linked > &:hover,
    .linked > &:active,
    .linked > &:focus,
    .linked > &:checked,
    .linked > &:backdrop {
        @extend %linked;
    }

    .linked.vertical > &,
    .linked.vertical > &:hover,
    .linked.vertical > &:active,
    .linked.vertical > &:focus,
    .linked.vertical > &:checked,
    .linked.vertical > &:backdrop {
        @extend %linked_vertical;
    }
}


/**************
 * ComboBoxes *
 **************/
combobox {
    arrow {
        -gtk-icon-source: -gtk-icontheme($arrow_down);
        min-height: 16px;
        min-width: 16px;
    }

    &.linked {
        button:nth-child(2) {
            &:dir(ltr) {
                @extend %linked_last_child;
            }
            &:dir(rtl) {
                @extend %linked_first_child;
            }
        }
    }
}
  
.linked > combobox > box > button.combo {
    // the combo is a composite widget so the way we do button linking doesn't
    // work, special case needed. See
    // https://bugzilla.gnome.org/show_bug.cgi?id=733979

    &:dir(ltr),
    &:dir(rtl) {
        @extend %linked_middle;
    } // specificity bump
}

.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_first_child; }
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_last_child; }
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked_only_child; }

.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_first_child;}
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_last_child; }
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; }
  
%needs_attention {
    animation: needs_attention 150ms ease-in;
    $_dot_shadow: gtk("@theme_widget_foreground_normal");
    $_dot_shadow_r: 0.5;
    background-image: -gtk-gradient(
        radial,
        center center,
        0,
        center center,
        0.5,
        to($_dot_color),
        to(transparent)),
        -gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent));
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-position: right 3px, right 4px;
    &:backdrop {
        background-size: 6px 6px, 0 0;
    }
    &:dir(rtl) {
        background-position: left 3px, left 4px;
    }
}
  
%linked_middle {
    border-radius: 0;
    border-right-style: none;
}

%linked_first_child {
    border-top-left-radius: $RadiusLittle;
    border-bottom-left-radius: $RadiusLittle;
}

%linked_last_child {
    border-top-right-radius: $RadiusLittle;
    border-bottom-right-radius: $RadiusLittle;
    border-right-style: solid;
}

%linked_only_child {
    border-radius: $RadiusLittle;
    border-style: solid;
}

%linked {
    @extend %linked_middle;
   
    &:first-child {
        @extend %linked_first_child;
    }

    &:last-child {
        @extend %linked_last_child;
    }

    &:only-child {
        @extend %linked_only_child;
    }
    
}


%linked_vertical_middle {
    border-style: solid solid none solid;
    border-radius: 0;
}

%linked_vertical_first_child {
    border-top-left-radius: $RadiusLittle;
    border-top-right-radius: $RadiusLittle;
}

%linked_vertical_last_child {
    border-bottom-left-radius: $RadiusLittle;
    border-bottom-right-radius: $RadiusLittle;
    border-style: solid;
}

%linked_vertical_only_child {
    border-radius: $RadiusLittle;
    border-style: solid;
}

%linked_vertical {
    @extend %linked_vertical_middle;

    &:first-child {
        @extend %linked_vertical_first_child;
    }

    &:last-child {
        @extend %linked_vertical_last_child;
    }

    &:only-child {
        @extend %linked_vertical_only_child;
    }
}

%undecorated_button {
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    -gtk-icon-shadow: none;
}

button.color {
    background: none;
}
